<template>
<page path-name="buttons">
    <div class="row">
        <div class="col-md-12">
            <panel color="default" title="Buttons" bg-color="grey-cararra">
                <tab bg-color="grey-cararra">
                    <tab-item header="Square Buttons" :active="true" id="tab-square-buttons">

                        <div class="row">
                            <div class="col-md-6">
                                <panel color="blue" title="Buttons" icon="icon-pin" :tab="true">
                                        <tab-item header="示例"  id="tab-square-buttons-example">
<div class="clearfix">
    <h4>Default Bootstrap Buttons(Customized to Match Theme Style)</h4>                                              
    <a href="javascript:;" class="btn btn-default">Default</a>
    <a href="javascript:;" class="btn btn-primary">Primary</a>
    <a href="javascript:;" class="btn btn-success">Success</a>
    <a href="javascript:;" class="btn btn-info">Info</a>
    <a href="javascript:;" class="btn btn-warning">Warning</a>
    <a href="javascript:;" class="btn btn-danger">Danger</a>
    <a href="javascript:;" class="btn btn-link">Link</a>
</div>
<div class="clearfix">
    <h4>Metronic Style Buttons</h4>
    <a href="javascript:;" class="btn default">Default</a>
    <a href="javascript:;" class="btn red">Red</a>
    <a href="javascript:;" class="btn blue">Blue</a>
    <a href="javascript:;" class="btn green">Green</a>
    <a href="javascript:;" class="btn yellow">Yellow</a>
    <a href="javascript:;" class="btn purple">Purple</a>
    <a href="javascript:;" class="btn dark">Dark</a>
</div>
<div class="clearfix">
    <h4>More Button Colors</h4>
    <a href="javascript:;" class="btn blue-hoki">Blue Hoki</a>
    <a href="javascript:;" class="btn blue-madison">Blue Madison</a>
    <a href="javascript:;" class="btn green-meadow">Green Meadow</a>
    <a href="javascript:;" class="btn red-sunglo">Red Sunglo</a>
    <a href="javascript:;" class="btn yellow-crusta">Yellow Crusta</a>
    <a href="javascript:;" class="btn purple-plum">Purple Plum</a>
    <a href="javascript:;" class="btn grey-cascade">Grey Cascade</a>
</div>
<div class="clearfix">
    <h4>Disabled</h4>
    <a href="javascript:;" class="btn default disabled">Default</a>
    <a href="javascript:;" class="btn red disabled">Red</a>
    <a href="javascript:;" class="btn blue disabled">Blue</a>
    <a href="javascript:;" class="btn green disabled">Green</a>
    <a href="javascript:;" class="btn yellow disabled">Yellow</a>
    <a href="javascript:;" class="btn purple disabled">Purple</a>
    <a href="javascript:;" class="btn dark disabled">Dark</a>
</div>
<div class="clearfix">
    <h4>Block Buttons</h4>
    <a href="javascript:;" class="btn blue btn-block">Blue</a>
</div>
<div class="clearfix">
    <h4>Button Sizes</h4>
    <a href="javascript:;" class="btn default  btn-lg">Large button</a>
    <a href="javascript:;" class="btn red ">Default button</a>
    <a href="javascript:;" class="btn blue btn-sm">Small button</a>
    <a href="javascript:;" class="btn green btn-xs">Extra small button</a>
</div>
<div class="clearfix">
    <h4>Glyphicon Button</h4>
    <a href="javascript:;" class="btn blue"><span class="glyphicon glyphicon-cog"></span> Blue</a>
    <a href="javascript:;" class="btn blue">Blue <span class="glyphicon glyphicon-cog"></span></a>
</div>
<div class="clearfix">
    <h4>Simple Line Button</h4>
    <a href="javascript:;" class="btn blue"><i class="icon-screen-desktop"></i> Blue</a>
    <a href="javascript:;" class="btn blue">Blue <i class="icon-screen-desktop"></i></a>
</div>
<div class="clearfix">
    <h4>Fontawesome Button</h4>
    <a href="javascript:;" class="btn blue"><i class="fa fa-edit"></i> Blue</a>
    <a href="javascript:;" class="btn blue">Blue <i class="fa fa-edit"></i></a>
</div>
                                        </tab-item>
                                        <tab-item header="代码" id="tab-square-buttons-code">
                                            <pre class=" language-markup"><code class=" language-markup" id="square-buttons-code"></code></pre>
                                        </tab-item>
                                </panel>
                            </div>

                            <div class="col-md-6">
                                <panel color="blue" title="Font Awesome Styled Buttons" icon="icon-pin" :tab="true">
                                    <tab-item header="示例"  id="tab-font-buttons-example">
<a href="javascript:;" class="icon-btn">
    <i class="fa fa-group"></i>
    <div>Users</div>
    <span class="badge badge-danger">2</span>
</a>
<a href="javascript:;" class="icon-btn">
    <i class="fa fa-barcode"></i>
    <div>Products</div>
    <span class="badge badge-success">4</span>
</a>
<a href="javascript:;" class="icon-btn">
    <i class="fa fa-bar-chart-o"></i>
    <div>Reports</div>
</a>
<a href="javascript:;" class="icon-btn">
    <i class="fa fa-sitemap"></i>
    <div>Categories</div>
</a>
<a href="javascript:;" class="icon-btn">
    <i class="fa fa-calendar"></i>
    <div>Calendar</div>
    <span class="badge badge-success">4</span>
</a>
<a href="javascript:;" class="icon-btn">
    <i class="fa fa-envelope"></i>
    <div>Inbox</div>
    <span class="badge badge-info">12</span>
</a>
<a href="javascript:;" class="icon-btn">
    <i class="fa fa-bullhorn"></i>
    <div>Notification</div>
    <span class="badge badge-danger">3</span>
</a>
<a href="javascript:;" class="icon-btn">
    <i class="fa fa-map-marker"></i>
    <div>Locations</div>
</a>
<a href="javascript:;" class="icon-btn">
    <i class="fa fa-money"><i></i></i>
    <div>Finance</div>
</a>
<a href="javascript:;" class="icon-btn">
    <i class="fa fa-plane"></i>
    <div>Projects</div>
    <span class="badge badge-info">21</span>
</a>
<a href="javascript:;" class="icon-btn">
    <i class="fa fa-thumbs-up"></i>
    <div>Feedback</div>
    <span class="badge badge-info">2</span>
</a>
<a href="javascript:;" class="icon-btn">
    <i class="fa fa-cloud"></i>
    <div>Servers</div>
    <span class="badge badge-danger">2</span>
</a>
<a href="javascript:;" class="icon-btn">
    <i class="fa fa-globe"></i>
    <div>Regions</div>
</a>
<a href="javascript:;" class="icon-btn">
    <i class="fa fa-heart-o"></i>
    <div>Popularity</div>
    <span class="badge badge-info">221</span>
</a>
                                    </tab-item>
                                    <tab-item header="代码" id="tab-font-buttons-code">
                                        <pre class=" language-markup"><code class=" language-markup" id="font-buttons-code"></code></pre>
                                    </tab-item>
                                </panel>
                            </div>
                        </div>

                    </tab-item>

                    <tab-item header="Circle Buttons" id="tab-circle-buttons">
                        <div class="row">
                            <div class="col-md-6">
                                <panel color="blue" title="Buttons" icon="icon-pin" :tab="true">
                                    <tab-item header="示例" :active="true" id="tab-circle-buttons-example">
<div class="clearfix">
    <h4>Default Bootstrap Buttons(Customized to Match Theme Style)</h4>
    <a href="javascript:;" class="btn btn-circle btn-default">Default</a>
    <a href="javascript:;" class="btn btn-circle btn-primary">Primary</a>
    <a href="javascript:;" class="btn btn-circle btn-success">Success</a>
    <a href="javascript:;" class="btn btn-circle btn-info">Info</a>
    <a href="javascript:;" class="btn btn-circle btn-warning">Warning</a>
    <a href="javascript:;" class="btn btn-circle btn-danger">Danger</a>
    <a href="javascript:;" class="btn btn-circle btn-link">Link</a>
</div>
<div class="clearfix">
    <h4>Metronic Style Buttons</h4>
    <a href="javascript:;" class="btn btn-circle default">Default</a>
    <a href="javascript:;" class="btn btn-circle red">Red</a>
    <a href="javascript:;" class="btn btn-circle blue">Blue</a>
    <a href="javascript:;" class="btn btn-circle green">Green</a>
    <a href="javascript:;" class="btn btn-circle yellow">Yellow</a>
    <a href="javascript:;" class="btn btn-circle purple">Purple</a>
    <a href="javascript:;" class="btn btn-circle dark">Dark</a>
</div>
<div class="clearfix">
    <h4>More Button Colors</h4>
    <a href="javascript:;" class="btn btn-circle blue-hoki">Blue Hoki</a>
    <a href="javascript:;" class="btn btn-circle blue-madison">Blue Madison</a>
    <a href="javascript:;" class="btn btn-circle green-meadow">Green Meadow</a>
    <a href="javascript:;" class="btn btn-circle red-sunglo">Red Sunglo</a>
    <a href="javascript:;" class="btn btn-circle yellow-crusta">Yellow Crusta</a>
    <a href="javascript:;" class="btn btn-circle purple-plum">Purple Plum</a>
    <a href="javascript:;" class="btn btn-circle grey-cascade">Grey Cascade</a>
</div>
<div class="clearfix">
    <h4>Disabled</h4>
    <a href="javascript:;" class="btn btn-circle default disabled">Default</a>
    <a href="javascript:;" class="btn btn-circle red disabled">Red</a>
    <a href="javascript:;" class="btn btn-circle blue disabled">Blue</a>
    <a href="javascript:;" class="btn btn-circle green disabled">Green</a>
    <a href="javascript:;" class="btn btn-circle yellow disabled">Yellow</a>
    <a href="javascript:;" class="btn btn-circle purple disabled">Purple</a>
    <a href="javascript:;" class="btn btn-circle dark disabled">Dark</a>
</div>
<div class="clearfix">
    <h4>Block Buttons</h4>
    <a href="javascript:;" class="btn btn-circle blue btn-block">Blue</a>
</div>
<div class="clearfix">
    <h4>Button Sizes</h4>
    <a href="javascript:;" class="btn btn-circle default  btn-lg">Large button</a>
    <a href="javascript:;" class="btn btn-circle red ">Default button</a>
    <a href="javascript:;" class="btn btn-circle blue btn-sm">Small button</a>
    <a href="javascript:;" class="btn btn-circle green btn-xs">Extra small button</a>
</div>
                                    </tab-item>
                                    <tab-item header="代码" id="tab-circle-buttons-code">
                                        <pre class=" language-markup"><code class=" language-markup" id="circle-buttons-code"></code></pre>
                                    </tab-item>
                                </panel>
                            </div>
                        </div>
                    </tab-item>
                </tab>
            </panel>
        </div>
    </div>
</page>
</template>
<script>

import {Page,Panel,Tab,TabItem} from '../../../src/components'

export default{
    components:{
        Page,
        Panel,
        Tab,
        TabItem
    },
    ready(){

        this.$nextTick(()=>{
            let Prism = require('prismjs')

            let html1 = Prism.highlight($('#tab-square-buttons-example').html().trim(), Prism.languages.markup);
            $('#square-buttons-code').html(html1)

            let html2 = Prism.highlight($('#tab-circle-buttons-example').html().trim(), Prism.languages.markup);
            $('#circle-buttons-code').html(html2)

            
            let html3 = Prism.highlight($('#tab-font-buttons-example').html().trim(), Prism.languages.markup);
            $('#font-buttons-code').html(html3)
        })
    }
}
</script>